<template>
  <div class="page">
  <div class="container teams-main">
    <div class="group fixed">
    <router-link class="cell" to="/add-team">
      <span class="add-new-team btn">+ 新增团队</span>
    </router-link>
    </div>
    <scroller style="top:64px" class="pdscroll" :on-infinite="load" :on-refresh="refresh" ref="my_scroller" :noDataText="noDataText">
    <ul class="teams-list">
      <li v-for="(team, index) in teams" :key="index">
      <router-link class="team-item" :to="{path:'edit-team', query:{id:team.id}}">
        <div class="team-name">团队：{{ team.team_name }}</div>

        <div class="team-related">
          <div class="team-charger"><label>主管：</label><span class="counselor-item" v-for="(team_manager, tmindex) in team.team_managers">{{ team_manager.name }}<i v-if="tmindex < team.team_managers.length-1">、</i></span></div>
          <div class="team-counselor">
            <label>顾问：</label><span class="counselor-item" v-for="(team_member, tbindex) in team.team_members">{{ team_member.name }}<i v-if="tbindex < team.team_members.length-1">、</i></span>
          </div>
        </div>
      </router-link>
      </li>
    </ul>
    </scroller>
  </div>
  </div>
</template>

<script>

  import Vue from 'Vue';
  import store from '../store';

  import Scroller from 'vue-scroller'

  export default{

  data() {
    return {
    isMore: '',
    containerHeight : 'height:'+document.body.scrollHeight+'px;',
    page_size:5,
    page_index:1,
    originNoDataText:'暂无数据',
    noDataText:'',
    teams:[]
    };
  },

  methods:{
    getTeams () {
      let that = this;

      store.dispatch('getTeams', {page_size:this.page_size, page_index:this.page_index})
      .then((response) => {
        if(response.data.errcode == 0) {

          let teams = typeof response.data.results.teams != 'undefined' ? response.data.results.teams : [];

          setTimeout(() => {
          that.teams = that.teams.concat(teams);
            setTimeout(() => {
            if (that.$refs.my_scroller) {
              that.$refs.my_scroller.finishInfinite(true);
              that.$refs.my_scroller.finishPullToRefresh();
              if(that.teams.length) {
              that.noDataText = '';
              }
            }
            }, 200)
          }, 1500)

        } else {
          console.log('response: ', JSON.stringify(response.data));
        }
      }).catch((error)=>{
        console.debug(error, JSON.stringify(response.data))
      });
      //测试数据
      // let response = {
      //   "errcode": 0,
      //   "errmsg": "查询团队列表成功",
      //   "results": {
      //     "total": 10,
      //     "page_index": 1,
      //     "page_size": 10,
      //     "teams": [
      //     {
      //       "id": "1",
      //       "parent_name": "全优加",
      //       "parent_id": "0",
      //       "team_name": "营销A队",
      //       "insert_time": "2016-07-12 22:32:04",
      //       "update_time": "2016-07-12 22:32:04",
      //       "team_managers": [
      //       {
      //         "name": "张三"
      //       },
      //       {
      //         "name": "李四"
      //       }
      //       ],
      //       "team_members": [
      //       {
      //         "name": "王五"
      //       },
      //       {
      //         "name": "刘六"
      //       }
      //       ]
      //     },
      //     {
      //       "id": "2",
      //       "parent_name": "全优加",
      //       "parent_id": "0",
      //       "team_name": "营销B队",
      //       "insert_time": "2016-07-12 22:32:04",
      //       "update_time": "2016-07-12 22:32:04",
      //       "team_managers": [
      //       {
      //         "name": "高飞"
      //       },
      //       {
      //         "name": "张飞"
      //       }
      //       ],
      //       "team_members": [
      //       {
      //         "name": "关飞"
      //       },
      //       {
      //         "name": "关羽"
      //       }
      //       ]
      //     }
      //     ]
      //   }
      //   };
      // if(response.errcode == 0) {
      //   this.teams = response.results.teams;
      // } else {
      //   alert('系统错误！');
      //   conso.elog('response: ', JSON.stringify(response));
      // }
    },

    refresh (iscroll) {
      console.log('refresh')
      // Refresh current data
      this.page_index++;
      this.getTeams();
    },

    log () {
      console.log('ee');
    },

    load (iscroll) {
      console.log('load')
      this.page_index++;
      this.getTeams();
      // Load new data
    },
  },

  components:{
    Scroller
  },

  mounted () {
    this.noDataText = this.originNoDataText;
    this.callJsApi('biz.navigation.setTitle',{title:'团队设置'});
    this.getTeams();
  },

  watch:{

    teams(value) {
    console.log('teams value', value)
    }
  },
  }
</script>

<style lang="less">

  @import "../less/index.less";

  .teams-main{
  background-color: white;


  .teams-list{
    width: 90%;
    margin: 0 auto;

    li{
    list-style: none;
    }
  }

  .team-item{
    border: 1px solid #39ADFF;
    margin: 10px 0;
    border-radius: 4px;
    display: block;
  }

  .team-related{
    padding: 10px;
    color: rgb(73, 73, 73);
  }

  .team-name{
    padding: 10px;
    background-color: #39ADFF;
    color: white;
    font-weight: bolder;
  }

  .team-counselor{
    display: inline-block;
    position: relative;
  }

  .cell{
    border:1px solid #39ADFF;
    width:90%;
    margin: 0 auto;
    border-radius: 4px;
    display: block;


    .add-new-team.btn{
      display: block;
      color: #39ADFF;
      padding: 10px;

    }
    }


  .group{
    padding-top: 20px;
    position: relative;
    width: 100%;

    &.fixed{
    position: fixed;
    left:0;
    top:0;
    z-index:1000;
    }
  }

  }

</style>
